<template>
  <div>
    <div class="form_wrap">
      <el-form class="ajfWrap" label-width="120px" style="margin-top:10px">
        <el-row>
          <el-col :span="2">
            审批信息：
          </el-col>
          <el-col :span="22">
            <el-row>
              <el-col :span="7">
                <el-form-item class="posInput" label="审批金额:">
                  <span class="pos left">小写</span>
                  <el-input
                    v-model="ht.contractGuaranteeMoney"
                    :disabled="true"
                  ></el-input>
                  <span class="pos right">（万元）</span>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item class="posInput ts" label="贷款期限:">
                  <el-input
                    v-model="ht.contractGuaranteeMonth"
                    :disabled="true"
                  ></el-input>
                  <span class="pos right">（个月）</span>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item class="posInput" label="还款方式:">
                  <el-input
                    v-model="ht.contractRepaymentModel"
                    :disabled="true"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="line-height: 20px;">
                <el-button
                  @click="openDiaGua"
                  v-if="showGuaranteeMoneyBtn && orderStatus == 3"
                  >{{ guaTitle }}</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <el-form label-width="120px" style="margin-top:10px">
        <el-row>
          <el-col :span="2">
            财务信息:
          </el-col>
          <el-col :span="22">
            <el-row style="text-align:left">
              <el-col :span="24"
                >意向申请金额：{{ yx.intentionMoney }}，意向点数{{
                  yx.intentionRatio
                }}，意向附加费{{ yx.intentionAddMoney }}，意向服务费{{
                  yx.intentionServerMoney
                }}</el-col
              >
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item class="posInput ts" label="核算点数:">
                  <el-input
                    v-model="cw.calculateRatio"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                  <span class="pos right">（%）</span>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="核算附加费:">
                  <el-input
                    v-model="cw.calculateAddMoney"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                  <span class="pos right">（元）</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <el-form-item class="posInput ts" label="收费金额:">
                  <el-input
                    v-model="cw.chargeMoney"
                    :disabled="true"
                  ></el-input>
                  <span class="pos right">（元）</span>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="实际收费时间:">
                  <el-date-picker
                    v-model="cw.chargeTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="true"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="line-height: 20px;">
                <el-button
                  @click="openDiaCharge"
                  v-if="showChargeBtn && orderStatus == 3"
                  >{{ chargeTitle }}</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="120px" style="margin-top:10px">
        <el-row>
          <el-col :span="2">
            放款信息:
          </el-col>
          <el-col :span="22">
            <el-row>
              <el-col :span="7">
                <el-form-item class="posInput ts" label="银行放款金额:">
                  <el-input
                    v-model="fk.lendingAmount"
                    :disabled="true"
                  ></el-input>
                  <span class="pos right">（万元）</span>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="银行放款时间:">
                  <el-date-picker
                    v-model="fk.lendingTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="true"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="line-height: 20px;">
                <el-button
                  @click="openDiaFk"
                  v-if="showChargeFkBtn && orderStatus == 3"
                  >{{ chargeTitle }}</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--弹框-->
    <!--弹框-->
    <el-dialog
      title="修改信息"
      :visible.sync="dialogTableVisible"
      v-if="dialogTableVisible"
    >
      <el-form
        v-if="showdis == 1"
        :model="diaht"
        ref="diaht"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              class="posInput"
              label="实际担保金额:"
              prop="contractGuaranteeMoney"
            >
              <span class="pos left">小写</span>
              <el-input v-model="diaht.contractGuaranteeMoney"></el-input>
              <span class="pos right ht-right">（万元）</span>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item
              class="posInput ts"
              label="实际担期限:"
              prop="contractGuaranteeMonth"
            >
              <el-input v-model="diaht.contractGuaranteeMonth"></el-input>
              <span class="pos right ht-right">（个月）</span>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              class="posInpt"
              label="还款方式:"
              prop="contractRepaymentModel"
            >
              <!-- <el-input v-model="diaht.contractRepaymentModel"></el-input> -->
              <el-select v-model="diaht.contractRepaymentModel">
                <el-option
                  v-for="item in contractRepaymentModel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitGua">确 定</el-button>
        </div>
      </el-form>
      <!--财务 -->
      <el-form label-width="120px" v-if="showdis == 2" :model="diacw">
        <el-row>
          <el-col :span="12">
            <el-form-item
              class="posInput ts"
              label="核算点数:"
              prop="chargeMoney"
            >
              <el-input
                v-model="diacw.calculateRatio"
                @blur="countChangeMoney"
              ></el-input>
              <span class="pos right ht-right">（%）</span>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              class="posInput ts"
              label="核算附加费:"
              prop="chargeMoney"
            >
              <el-input
                v-model="diacw.calculateAddMoney"
                @blur="countChangeMoney"
              ></el-input>
              <span class="pos right ht-right">（ 元）</span>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              class="posInput ts"
              label="收费金额:"
              prop="chargeMoney"
            >
              <el-input v-model="diacw.chargeMoney"></el-input>
              <span class="pos right ht-right">（元）</span>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="实际收费时间:" prop="chargeTime">
              <el-date-picker
                v-model="diacw.chargeTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker> </el-form-item
          ></el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitcharge">确 定</el-button>
        </div>
      </el-form>
      <!--放款-->
      <el-form label-width="120px" v-if="showdis == 3" :model="diafk">
        <el-row>
          <el-col :span="12">
            <el-form-item
              class="posInput ts"
              label="银行放款金额:"
              prop="chargeMoney"
            >
              <el-input v-model="diafk.lendingAmount"></el-input>
              <span class="pos right ht-right">（万元）</span>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="银行放款时间:" prop="lendingTime">
              <el-date-picker
                v-model="diafk.lendingTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker> </el-form-item
          ></el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAjfLoan">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUpForm,
  postGuaranteeMoney,
  putAjfCharge,
  putAjfLoan,
  getProductUrl,
  getIntention,
  getChargeCount
} from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "LoanInfor",
  props: ["orderNumber"],
  data() {
    return {
      orderStatus: null,
      //意向
      yx: {
        intentionMoney: null,
        intentionRatio: null,
        intentionAddMoney: null,
        intentionServerMoney: null
      },
      //合同
      dialogTableVisible: false,
      //合同
      ht: {
        contractGuaranteeMoney: null,
        contractGuaranteeMonth: null,
        contractRepaymentModel: null
      },
      contractRepaymentModel: [
        { lable: "等额本息", value: "等额本息" },
        { lable: "先息后本", value: "先息后本" },
        { lable: "等额本金", value: "等额本金" },
        { lable: "等额等息", value: "等额等息" }
      ],
      diaht: {},
      //财务
      cw: {
        chargeMoney: null,
        chargeInvoiceTime: null,
        calculateRatio: null,
        calculateAddMoney: null
      },
      diacw: {},
      //放款
      fk: {},
      diafk: {},
      guaTitle: "修改",
      chargeTitle: "修改",
      warrantTitle: "修改",
      showdis: null,
      diaTitle: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      golbalPermissions: [],
      ProductUrl: ""
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.status = eval(this.$route.query.status);
    if (!this.status) {
      this.getUpForm(this.orderNumber);
    }
    this.findProductUrl(this.orderNumber);
    this.getIntention();
  },
  computed: {
    //合同数据添加按钮
    showGuaranteeMoneyBtn: function() {
      return checkPermiss(
        "business:upForm:GuaranteeMoney",
        this.golbalPermissions
      );
    },
    //财务信息添加按钮
    showChargeBtn: function() {
      return checkPermiss("business:upForm:charge", this.golbalPermissions);
    },
    //放款信息添加按钮
    showChargeFkBtn: function() {
      return checkPermiss("business:upForm:chargeAjf", this.golbalPermissions);
    }
  },
  methods: {
    //填写核算点数，核算附加费算出收费
    countChangeMoney() {
      if (this.diacw.calculateRatio && this.diacw.calculateAddMoney) {
        getChargeCount({
          orderNumber: this.orderNumber,
          calculateRatio: this.diacw.calculateRatio,
          calculateAddMoney: this.diacw.calculateAddMoney
        }).then(res => {
          this.diacw.chargeMoney = res.data;
        });
      } else if (!this.diacw.calculateRatio) {
        this.$message.warning("请输入核算点数");
      } else {
        this.$message.warning("请输入核算附加费");
      }
    },
    //获取意向金额
    getIntention() {
      getIntention({ orderNumber: this.orderNumber }).then(res => {
        if (res.data) {
          this.yx = res.data;
        }
      });
    },
    //根据订单查询路由path路径
    findProductUrl(orderNumber) {
      getProductUrl({
        orderNumber: orderNumber
      }).then(res => {
        this.ProductUrl = res.data.productUrl;
        this.orderStatus = res.data.orderStatus;
        this.markUpdate = res.data.markUpdate;
      });
    },
    //根据订单号查询当前信息
    getUpForm(orderNumber) {
      let that = this;
      getUpForm({
        orderNumber: orderNumber
      }).then(res => {
        let data = res.data;
        that.ht.contractGuaranteeMoney = data.contractGuaranteeMoney;
        that.ht.contractGuaranteeMonth = data.contractGuaranteeMonth;
        that.ht.contractRepaymentModel = data.contractRepaymentModel;
        that.cw.chargeMoney = data.chargeMoney;
        that.cw.chargeTime = data.chargeTime;
        that.cw.calculateRatio = data.calculateRatio;
        that.cw.calculateAddMoney = data.calculateAddMoney;
        that.fk.lendingAmount = data.lendingAmount;
        that.fk.lendingTime = data.lendingTime;
        this.$forceUpdate();
        if (
          that.ht.contractGuaranteeMoney == null &&
          that.ht.contractGuaranteeMonth == null
        ) {
          that.guaTitle = "添加数据";
          that.ht.contractRepaymentModel = "等额本息";
        }
        if (that.cw.chargeMoney == null && that.cw.chargeMoney == null) {
          that.chargeTitle = "添加数据";
        }
      });
    },
    openDiaGua() {
      this.showdis = 1;
      this.dialogTableVisible = true;
      this.diaht = JSON.parse(JSON.stringify(this.ht));
    },
    openDiaCharge() {
      this.showdis = 2;
      this.dialogTableVisible = true;
      this.diacw = JSON.parse(JSON.stringify(this.cw));
    },
    openDiaFk() {
      this.showdis = 3;
      this.dialogTableVisible = true;
      this.diafk = JSON.parse(JSON.stringify(this.fk));
    },
    //转换日期格式
    StrToGMT(time) {
      let GMT = new Date(time);
      return GMT;
    },
    //审批提交按钮
    submitGua() {
      this.diaht.orderNumber = this.orderNumber;
      postGuaranteeMoney(this.diaht).then(res => {
        if (res.code == 200) {
          this.getUpForm(this.orderNumber);
          this.guaTitle = "修改";
          this.dialogTableVisible = false;
          this.$message.success(res.message);
          //this.$router.push({ path: this.ProductUrl });
        }
      });
    },
    //财务提价按钮
    submitcharge() {
      this.diacw.orderNumber = this.orderNumber;
      if (this.diacw.chargeTime) {
        this.diacw.chargeTime = this.StrToGMT(this.diacw.chargeTime);
      }
      putAjfCharge(this.diacw).then(res => {
        if (res.code == 200) {
          this.getUpForm(this.orderNumber);
          this.chargeTitle = "修改";
          this.dialogTableVisible = false;
          this.$message.success(res.message);
          //this.$router.push({ path: this.ProductUrl });
        }
      });
    },
    //放款提价按钮
    submitAjfLoan() {
      this.diafk.orderNumber = this.orderNumber;
      this.diafk.lendingTime = this.StrToGMT(this.diafk.lendingTime);
      putAjfLoan(this.diafk).then(res => {
        if (res.code == 200) {
          this.getUpForm(this.orderNumber);
          this.chargeTitle = "修改";
          this.dialogTableVisible = false;
          this.$message.success(res.message);
          //this.$router.push({ path: this.ProductUrl });
        }
      });
    }
  }
};
</script>

<style scoped type="less">
.posInput {
  position: relative;
}
.pos {
  position: absolute;
  z-index: 2;
}
.pos.left {
  left: 10px;
}
.pos.right {
  right: 0;
}
.posInput ::v-deep .el-input__inner {
  padding: 0 50px 0 40px;
  text-align: center;
}
.posInput.ts ::v-deep .el-input__inner {
  padding-left: 25px;
}
.toBe {
  line-height: 35px;
}
.form_wrap ::v-deep .el-form-item,
.form_wrap ::v-deep .el-form-item__label,
.form_wrap ::v-deep .el-form-item__content,
.form_wrap ::v-deep .el-input,
.form_wrap ::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
  width: 315px;
}
.form_wrap ::v-deep .el-form-item {
  margin-bottom: 5px;
}
.form_wrap ::v-deep .el-col {
  line-height: 32px;
}
.form_wrap ::v-deep .el-button {
  padding: 8px 20px;
}
.form_wrap ::v-deep.el-input__icon {
  line-height: 24px;
}
::v-deep .el-form-item__content {
  text-align: left;
}
.el-date-editor.el-input {
  width: auto;
}
</style>
